<template>
    <admin-container :loading="loading">
        <el-table :data="list">
            <el-table-column prop="id" label="UID" width="150px"/>

            <el-table-column prop="user.nickname" label="昵称"/>

            <el-table-column label="货币" width="180px">
                <template v-slot="{ row }">
                    <span v-if="row.type === 'money'">金额</span>
                    <span v-else-if="row.type === 'score'">积分</span>
                </template>
            </el-table-column>

            <el-table-column prop="value" label="数额"/>

            <el-table-column prop="create_time" label="操作时间"/>

        </el-table>

        <el-pagination :current-page="page"
                       :page-size="limit"
                       :total="total"
                       @current-change="onCurrentChange"
        />
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { UserFinanceLogModel } from '@/models/user-finance-log.model';
import { getUserFinanceLogList } from '@/services/user-finance-log.service';
import KTableAction from '@/components/table-action.vue';
@Component({
    components: { KTableAction, AdminContainer }
})
export default class UserLogs extends Vue {
    loading: boolean = true;
    list: UserFinanceLogModel[] = [];
    page: number = 1;
    limit: number = 10;
    total: number = 0;

    async mounted() {
        this.loading = true;
        await this.getList();
        this.loading = false;
    }

    async getList() {
        const user = await getUserFinanceLogList({
            page: this.page,
            limit: this.limit,
        });
        if (user.status == 200) {
            this.list = user.data.items;
            this.total = user.data.total;
        }
    }

    onClickCommand() {}

    onCurrentChange(page: number) {
        this.page = page;
        this.getList();
    }
}
</script>
